<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-11-01 14:00:33
 * @LastEditTime: 2024-11-18 15:30:54
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 主页
 * @FilePath: \markdown-magic\src\pages\Home\page\entry\index.vue
 * Copyright 版权声明
-->

<template>
  <div class="pageWrap">
    <a-tabs 
      type="card"
      :style="{}"
      v-model:activeKey="activeKey"
      @change="handleChangeTab"
    >
      <a-tab-pane v-for="item in data.toolTypeList" :key="item.value" :tab="item?.name"></a-tab-pane>
    </a-tabs>
    <div class="item-list">
      <div class="item" v-for="(item, index) in data.toolList" :key="index" @click="onClickItem(item)">
        <div class="item-title">
          <h3>
            {{ item.name }}
          </h3>
          <span>
            [ {{ item.type }} ]
          </span>
        </div>
        <p>
          {{ item.desc }}
        </p>
      </div>
    </div>
    <!-- <input type="text" id="urlInput" placeholder="Enter URL" value="https://www.baidu.com" />
    <button @click="fetchData()">Fetch Data</button>
    <pre id="result"></pre> -->
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

import { createMarkdownWin, createCommonWin } from '@/utils/windows/actions.js'

import { toolTypeList } from '../../config/tools.js'

import { invoke } from '@tauri-apps/api/core'
// const invoke = window.__TAURI__.invoke

const activeKey = ref(toolTypeList[0]?.value??'')

const data = reactive({
  toolTypeList: toolTypeList,
  toolList: []
})

const fetchData = async () => {
  const url = document.getElementById('urlInput').value;
  try {
    console.log(`🚀 ~ fetchData ~ url:`, url)
    const result = await invoke('call_python_script', { url });
    console.log(`🚀 ~ fetchData ~ result:`, result)
    document.getElementById('result').textContent = result;
  } catch (error) {
    document.getElementById('result').textContent = `Error: ${error}`;
  }
}

const handleChangeTab = (val) => {
  const currentType = toolTypeList.find(item => item.value === val)
  data.toolList = currentType?.children || []
  data.toolList.map((item) => {
    item.type = currentType.name
  })

}

handleChangeTab(activeKey.value)

// 点击事件
const onClickItem = async (item) => {
  const { value } = item
  switch (value) {
    case 'MarkdownMagic':
      createMarkdownWin()
      break
    case 'ImgEnlarge':
      createCommonWin({
        label: 'ImgEnlargeWin',
        title: '图片放大',
        url: '/img-enlarge'
      })
      break
    case 'TextDiffer':
      createCommonWin({
        label: 'TextDifferWin',
        title: '文本比对',
        url: '/text-differ'
      })
      break
    case 'UUID':
      createCommonWin({
        label: 'UUIDWin',
        title: 'UUID生成器',
        url: '/uuid'
      })
      break
    case 'TextDiffer':
      createCommonWin({
        label: 'TextDifferWin',
        title: '文本比对',
        url: '/text-differ'
      })
      break
    case 'WebSocketTester':
      createCommonWin({
        label: 'WebSocketTesterWin',
        title: 'websocket测试工具',
        url: '/websocket-tester'
      })
      break
    case 'Encdes':
      createCommonWin({
        label: 'EncdesWin',
        title: '文字加密解密',
        url: '/encdes'
      })
      break
    case 'ImgToBase64':
      createCommonWin({
        label: 'ImgToBase64Win',
        title: '图片、base64互转',
        url: '/img-to-base64'
      })
      break
    default:
      createCommonWin({
        label: `${item.value}Win`,
        title: `${item.name}`,
        url: `/${item.value}`
      })
  }
}
</script>

<style lang="scss" scoped>
.pageWrap {
  .item-list {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(auto-fill,minmax(285px,1fr));
    justify-content: space-evenly;
    padding-bottom: 16px;
    .item {
      border: 1px solid #ddd;
      position: static;
      border-radius: 10px;
      transition: box-shadow .3s ease-in-out;
      padding: 16px;
      cursor: pointer;
      background-color: #fff;
      .item-title{
        display: flex;
        h3{
          font-size: 16px;
          font-weight: bold;
          flex: 1;
        }
        span{
          font-size: 12px;
          color: #999;
        }
      }
      p{
        margin: 0;
        padding: 0;
        line-height: 1.6em;
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>
